<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <style>
        *{margin:0px;padding:0px;font-size:12px;}
        ul,li{list-style: none}
        a{text-decoration: none}
        .clear:after{display: block;content:'';zoom:1;clear:both}
        .head{height:172px;width:1280px;background: red;margin-left: 10px;margin-right: 10px}
        .head .top{height: 32px;background: green}
        .head .top .left{height:32px;width: 290px;background: rgb(227,228,229);float:left}
        .head .top .left img{display: block;float: left;margin-left: 240px;margin-top: 6px}
        .head .top .left span{display: block;float: left;margin-left: 4px;line-height: 32px;
            color:rgb(161,164,188)}
        .head .top .right{height:32px;width: 990px;background: rgb(227,228,229);float: left}
        .head .top .right ul{margin-left: 234px;height: 32px;}
        .head .top .right ul li{float: left;margin-left: 10px;line-height: 32px;}
        .head .top .right ul li a{color:rgb(156,154,157)}
        .head .top .right ul .space{width:1px;background: rgb(207,209,203);height: 10px;margin-top: 11px}
        .head .top .right ul #register{color:rgb(241,2,21);margin-left: 5px}
        .head .middle{height: 99px;background: rgb(245,245,245);position: relative}
        .head .middle .search{width: 552px;height: 34px;position: absolute;
        left: 357px;top: 26px}
        .head .middle .cart{width: 190px;height: 35px;background: white;position: absolute;
        right: 135px;top: 26px}
        .head .middle .cart #c1{display: block;width: 19px;height: 18px;position: absolute;
         top: 9px;left: 53px;background: url("images/toolbars.png") no-repeat}
        .head .middle .cart #c2{display: block;position: absolute;top: 9px;left: 76px}
        .head .middle .cart #c3{display: block;width: 16px;height: 16px;text-align: center;line-height: 16px;
          position: absolute;top: 5px;right: 36px;color: white;background: rgb(241,2,21);border-radius: 8px}
        .head .middle .search .find{height: 32px;width: 495px;border: 1px solid rgb(241,2,21);
            display: block;float: left}
        .head .middle .search .btn{height: 34px;width: 51px;border: 1px solid rgb(241,2,21);
            display: block;float: left;background: url("images/search.png") no-repeat center center rgb(241,2,21)}
        .head .middle .ercode{position: absolute;top: 0px;right: 35px}
        .head .middle ul{position: absolute;top: 71px;left: 350px;}
        .head .middle ul li{float: left;font-size: 10px;margin-left: 10px}
        .head .middle ul li a{color: rgb(156,154,157)}
        .head .middle .search .carm{display: block;width: 19px;height: 15px;
            background: url("images/sprite-photo-search.png") no-repeat -30px 0px;
            position: absolute;left: 466px;top: 10px}
        .head .bottom{height: 41px;background: rgb(245,245,245)}
        .head .bottom ul{margin-left: 333px;height: 41px}
        .head .bottom ul li{float: left;margin-right: 20px;line-height: 41px}
        .head .bottom ul li a{font-size: 16px;color: rgb(84,85,86)}
        #logo{display: block;width: 191px;height: 172px;
            background: url("images/logo.v2.png") no-repeat white;
            position: absolute;top: 0px;left: 55px;
            text-indent: -1000em;}
        .product{width:1280px;height: 481px;background: yellow;margin-left: 10px;margin-right: 10px}

    </style>
</head>
<body>
<div class="head clear">
    <div class="top clear">
        <div class="left">
            <img src="images/bj.png" alt=""><span>北京</span>
        </div>
        <div class="right">
            <ul>
                <li><a href="">您好，请登录</a><a href="" id="register">免费注册</a></li>
                <li class="space"></li>
                <li><a href="">我的订单</a></li>
                <li class="space"></li>
                <li><a href="">我的京东</a><img src="images/arrow.png" alt=""></li>
                <li class="space"></li>
                <li><a href="">京东会员</a></li>
                <li class="space"></li>
                <li><a href="">企业采购</a></li>
                <li class="space"></li>
                <li><a href="">客户服务</a><img src="images/arrow.png" alt=""></li>
                <li class="space"></li>
                <li><a href="">网站导航</a><img src="images/arrow.png" alt=""></li>
                <li class="space"></li>
                <li><a href="">手机京东</a></li>
            </ul>
        </div>
    </div>
    <div class="middle clear">
        <div class="search">
            <input type="text" name="search" class="find" placeholder="磁力片">
            <input type="button" class="btn">
            <span class="carm"></span>
        </div>
         <ul>
                <li><a href="">815店庆</a> </li>
                <li><a href="">JD tab</a></li>
                <li><a href="">新品上市</a></li>
                <li><a href="">箱包减300</a></li>
                <li><a href="">领券减500</a></li>
                <li><a href="">泡茶壶</a></li>
                <li><a href="">移动硬盘</a></li>
                <li><a href="">不止5折</a></li>
                <li><a href="">游戏耳机</a></li>
         </ul>
        <div class="cart">
            <span id="c1"></span>
            <span id="c2">我的购物车</span>
            <span id="c3">0</span>
        </div>
        <div class="ercode">
            <img src="images/ercode.png" alt="">
        </div>

    </div>
    <div class="bottom clear">
        <ul>
            <li><a href="">秒杀</a></li>
            <li><a href="">优惠券</a></li>
            <li><a href="">闪购</a></li>
            <li><a href="">拍卖</a></li>
            <li><a href="">服装城</a></li>
            <li><a href="">京东超市</a></li>
            <li><a href="">生鲜</a></li>
            <li><a href="">全球购</a></li>
            <li><a href="">京东金融</a></li>
        </ul>
    </div>
    <a href="" id="logo">d</a>

</div>
<div class="product">


</div>
</body>
</html>